<template>
    <el-tabs v-model="state.active" class="fill-width send-code">
        <el-tab-pane label="手机短信验证" name="phone">
            <ISendSmsCode v-if="state.active=='phone'" @update:model-value="onInput"/>
        </el-tab-pane>
        <el-tab-pane label="邮箱验证" name="email">
            <ISendMailCode v-if="state.active=='email'" @update:model-value="onInput"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import ISendMailCode from "~/components/ISendMailCode.vue";
import ISendSmsCode from "~/components/ISendSmsCode.vue";
import {onMounted, reactive, watch} from "vue";

interface Props {
    modelValue?: string;
    codeType?: string;
}

const state = reactive({
    active: "phone",
});

const props = withDefaults(defineProps<Props>(), {
    codeType: "phone",
});

const emits = defineEmits(["update:modelValue", "update:codeType"]);

function onInput(e: string) {
    emits("update:modelValue", e);
}

watch(() => state.active, value => {
    emits("update:codeType", value);
});

onMounted(() => {
    if (props.codeType) {
        state.active = props.codeType;
    } else {
        emits("update:codeType", state.active);
    }
});
</script>

<style lang="scss" scoped>
.send-code {
  --el-tabs-header-height: 30px;

  :deep(.el-tabs__header) {
    margin-bottom: 8px !important;
  }
}
</style>
